<template>
  <page-container title="订单评论">
   <view class="comment-page" >

     <!-- 店铺名称 -->
     <view class="shop-title">
       {{orderInfo.title}}
     </view>
   
     <!-- 评论输入区域 -->
     <view class="comment-area">
       <textarea 
         class="comment-input"
         placeholder="快来说说本店品质如何，供大家参考"
         placeholder-style="color: #999999"
         v-model="commentContent"
       />
     </view>
   
     <!-- 提交按钮 -->
     <view class="submit-btn" @click="submitComment">
       提交评论
     </view>
   </view>
  </page-container>
</template>

<script lang="ts" src="./add.ts"></script>

<style lang="scss" scoped>

.comment-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
  z-index: 11;
}
.custom-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
	background: url('http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/background.jpg');  
  .trasnicon{
  	  transform: rotate(180deg);
    }
    .nav-content {
  	height: 44px;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	padding: 0 12px;
  	background: transparent;
  	
  	.left-area {
  	  display: flex;
  	  align-items: center;
  	  
  	  .iconfont {
  		font-size: 16px;
  		color: #333;
  		margin-right: 8px;
  	  }
  	  
  	  .nav-title {
  		font-size: 16px;
  		color: #333;
  		font-weight: 500;
  	  }
  	}
  	
  	
    }
  }

.shop-title {
	margin-top: 40rpx;
  color: #333;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}

.comment-area {
  margin: 20rpx 30rpx;
  background-color: #f4f5f7;
  border-radius: 12rpx;
  min-height: 400rpx;
  padding: 20rpx;

  .comment-input {
    width: 100%;
    height: 360rpx;
    font-size: 28rpx;
  }
}

.submit-btn {
	width: 280rpx;
	height: 60rpx;
	background: #43d534;
	border-radius: 30rpx;
  position: fixed;
  bottom: 200rpx;
	left: 50%;
	margin-left: -140rpx;
  background-color: #07c160;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 400;
  color: #ffffff;
}
</style> 